<template>
    <div class="shop">
        <!-- 搜索 -->
        <div class="search">
            <span class="iconfont search_back" @click="$router.push('/home')">&#xe697;</span>
            <div class="search_content">
                <span class="iconfont search_content_icon">&#xe632;</span>
                <input type="text" class="search_content_input" placeholder="请输入商品名称">
            </div>
        </div>
        <!-- 商店信息 -->
        <div class="shop_info">
            <ShopInfo :shopInfo="shop" />
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="category">
                <div class="category_item" @click="productList(), changeCategory('all')"
                    :class="{ 'category_item--active': activeCategory === 'all' }">
                    全部商品
                </div>
                <div class="category_item" v-for="item in shop.category" :key="item.id"
                    @click="productList(item.list), changeCategory(item.name)"
                    :class="{ 'category_item--active': activeCategory === item.name }">
                    {{ item.name }}</div>
            </div>
            <div class="product">
                <div>
                    <Product v-for="product in categoryList" :key="product.id" :category="product" />
                </div>
            </div>
        </div>
        <!-- 购物车底部 -->
        <CartBottom :category="categoryList" :shopInfo="shop" />
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import Product from '../components/Product.vue';
import CartBottom from '../components/CartBottom.vue';
import { useRoute } from 'vue-router';
import { useUserStore } from '../store/shop.js';
import ShopInfo from '../components/ShopInfo.vue';

const route = useRoute();
const store = useUserStore();
const nearbyList = store.nearbyList;
const categoryList = reactive([]);
const shop = nearbyList.find(item => item.id == route.query.id);
const allProducts = shop.category.flatMap(item => item.list);
const activeCategory = ref('all');


onMounted(() => {
    productList();
});

const productList = (list) => {
    if (list) {
        categoryList.splice(0, categoryList.length, ...list);
        console.log(categoryList);
    } else {
        categoryList.splice(0, categoryList.length, ...allProducts);
        console.log(categoryList);
    }
}

const changeCategory = (category) => {
    activeCategory.value = category;
}
</script>

<style lang="scss" scoped>
@import "../style/viriables.scss";

.shop {

    //搜索
    .search {
        position: fixed;
        top: 0;
        left: 0;
        margin: .18rem;
        display: flex;
        align-items: center;

        &_back {
            font-size: .24rem;
            margin-right: .08rem;
            color: #b6b6b6;
        }

        &_content {
            flex: 1;
            height: .32rem;
            background-color: #f5f5f5;
            border-radius: .16rem;
            display: flex;
            align-items: center;

            &_icon {
                color: #b6b6b6;
                margin: 0 .12rem;
            }

            &_input {
                border: none;
                outline: none;
                background: none;
                width: 100%;
                height: .32rem;
            }
        }
    }

    //商店信息
    .shop_info {
        margin: 0 .18rem;
        top: 50px;
        left: 5px;
        position: fixed;

    }

    // 内容
    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 1.7rem;
        bottom: .5rem;
        display: flex;

        .category {
            overflow-y: scroll;
            width: .78rem;
            background-color: #f5f5f5;

            &_item {
                line-height: .4rem;
                font-size: .14rem;
                text-align: center;
                color: $content_fontcolor;

                &--active {
                    background-color: $bgColor;
                }
            }
        }

        .product {
            flex: 1;
            overflow-y: scroll;
        }
    }
}
</style>